<template>
    <div class="header-box">
        <el-header>
            <div class="header" style="height: inherit;">
                <div style="display: flex;align-items: center;">
                  <img style="width: 110px;height: 50px;margin-right: 14px;" src="../../assets/ryzLogo/logo-4.png" alt=""> 
                  <h3 style="">融易装管理后台</h3>
                </div>
                <div class="header_right">
                    <!-- <div class="header_right_left"><i class="el-icon-message-solid" @click="handleMessage"></i></div> -->
                    <div class="header_right_right">
                        <div class="header_right_right_image" style="display: flex;align-items: center;" v-if="info.logo">
                            <img :src="info.logo.path" alt="">
                        </div>
                        <div class="header_right_right_image" v-else></div>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                {{info.name?info.name:'暂未设置'}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <div class="help" @click="dialogVisible=true">个人中心</div>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <div class="down_login" @click="downLogin">退出登录</div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-header>
        <el-dialog title="个人中心" :visible.sync="dialogVisible" width="25%">
            <div class="selfBox">
                <div class="imgBox">
                    <div class="header_right_right_image" v-if="info.logo">
                        <img :src="info.logo.path" alt="">
                    </div>
                    <div class="header_right_right_image" v-else></div>
                </div>
                <div class="titleInfo">{{info.name?info.name:'暂未设置'}}</div>
                <div style="text-align:center;margin:10px 0;">{{mobile}}</div>
                <div style="text-align:center;">
                    <el-button type="primary" size="mini" :disabled="changeBtn" @click="toChangePw">修改登录密码<span v-if="changeBtn"> ({{num}})</span></el-button>
                </div>
                <el-dialog width="25%" title="修改登录密码" :visible.sync="innerVisible" append-to-body>
                    <div class="codeBox">
                        <div>
                            验证码<el-input v-model="code" placeholder="请输入验证码"></el-input>
                        </div>
                        <div>
                            新密码<el-input v-model="new_pw" placeholder="请输入新密码"></el-input>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="innerVisible = false">取 消</el-button>
                        <el-button type="primary" @click="toChangeBtn">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: '小刀',
                info: {},
                mobile: '',
                dialogVisible: false,
                innerVisible: false,
                code: '',
                new_pw: '',
                num: 60,
                timer: null,
                changeBtn: false
            }
        },
        mounted() {
            this.info = JSON.parse(localStorage.getItem('info'))
            this.mobile = localStorage.getItem('mobile')
            console.log(this.info.name, 'yonghu xixni ');
        },

        // 退出登录
        methods: {
            // 修改密码按钮
            toChangePw() {
                clearInterval(this.timer)
                this.$confirm(`此操作将发送验证码至${this.mobile}，是否继续？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.innerVisible = true
                    this.changeBtn = true
                    this.countDown()
                    this.$http.post('/api/admin/base/sendselfsms').then(res => {
                        if (res.code == 1) {
                            this.$message.success('验证码发送成功')
                        } else {
                            this.$message.warning(res.msg)
                        }
                    })
                }).catch(() => {})
            },

            // 输入验证码与新密码后确定
            toChangeBtn() {
                if (this.code == '') {
                    this.$message.warning('请输入验证码')
                    return
                }
                if (this.new_pw == '') {
                    this.$message.warning('请输入新密码')
                    return
                }
                let params = {
                    code: this.code,
                    new_pw: this.new_pw
                }
                this.$http.post('/api/admin/base/resetPW', params).then(res => {
                    console.log(res, '更改密码结果');
                    if (res.code == 1) {
                        this.$message.success('修改密码成功')
                        this.innerVisible = false
                    } else {
                        this.$message.warning(res.msg)
                    }
                })
            },

            // 倒计时
            countDown() {
                let that = this
                this.timer = setInterval(function() {
                    that.num--
                    if (that.num < 1) {
                        clearInterval(that.timer)
                        that.num = 60
                        that.changeBtn = false
                    }
                    console.log(that.num, 'num');
                }, 1000)
            },

            handleMessage() {
                console.log('无新消息')
            },
            setname() {


            },
            downLogin() {
                localStorage.removeItem('liankun_user');
                localStorage.clear()
                //   this.$message({
                //       showClose: true,
                //       message: '未登录，请先登录',
                //       type: 'error'
                //   });
                this.$router.push({ path: '/partnerLogin' });
            }
        }
    }
</script>
<style  lang='less' scoped>
    .selfBox {
        .imgBox {
            .header_right_right_image {
                margin: 0 auto 20px;
            }
        }

        .titleInfo {
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin: 10px
        }
    }

    .codeBox {
        div {
            margin: 5px 0;

            .el-input {
                width: 70%;
                margin-left: 10px;
            }
        }
    }

    .el-header{
        padding: 0 20px 0 0;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        h3{
          color: #fff;
          font-weight: 600;
          font-size:20px;
          margin-bottom: 0px;
        }
        &_right {
            height: 100%;
            display: flex;
            align-items: center;

            &_left {
                font-size: 28px;
                color: #fff;
                margin-right: 52px;
                position: relative;

                &::after {
                    content: '6';
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: #FF9502;
                    position: absolute;
                    right: 0px;
                    top: 12px;
                    font-size: 12px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            &_right {
                display: flex;
                align-items: center;

                &_image {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: skyblue;
                    margin-right: 16px;

                    img {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                    }
                }

                .el-dropdown {
                    color: #fff;
                }
            }
        }
    }

    .el-header {
        width: 100%;
        background-color: #242f42;
        color: #fff;
        line-height: 60px;
    }
</style>